import SEO from '../components/SEO'

<SEO
  title="Select"
  description="Select component is a component that allows users to pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."
/>

# Select

Select component is a component that allows users to pick a value from predefined options. Ideally, it should be used when there are more than five options, otherwise you might consider using a radio group instead.

## Import

<carbon-ad />

```js
import { CSelect } from '@chakra-ui/vue'
```

## Usage

Here's a basic usage of the Select component.

```vue live=true
<template>
  <c-box mb="3" w="300px">
    <c-select v-model="burgerType" placeholder="Select Burger">
      <option value="grilled">Grilled Backyard Burger</option>
      <option value="pub-style">The Pub-Style Burger</option>
      <option value="jucy-lucy">The Jucy Lucy</option>
    </c-select>
  </c-box>
</template>
<script>
export default {
  data() {
    return {
      burgerType: ''
    }
  }
}
</script>
```

### Changing the size of the Select

There are three sizes of select : large (48px), default (40px) and small (32px).

```vue live=true
<c-stack :spacing="3">
  <c-select placeholder="large size" size="lg" />
  <c-select placeholder="default size" size="md" />
  <c-select placeholder="small size" size="sm" />
</c-stack>
```

### Changing the appearance of the Select

Like the input component, select comes in 3 variants, `outline`, `unstyled`
, `flushed` , and `filled`. Pass the `variant` prop and set it to either of
these values.

```vue live=true
<c-stack :spacing="3">
  <c-select variant="outline" placeholder="Outline" />
  <c-select variant="filled" placeholder="Filled" />
  <c-select variant="flushed" placeholder="Flushed" />
  <c-select variant="unstyled" placeholder="Unstyled" />
</c-stack>
```

### Overriding the styles of the Select

Even though the select comes with predefined styles, you can override pretty
much any property. Here's we'll override the background color.

```vue live=true
<c-select
  backgroundColor="tomato"
  borderColor="tomato"
  color="white"
  placeholder="Woohoo! A new background color!"
/>
```

## Props

The Select component composes [PseudoBox](/pseudoBox) so you can pass all `PseudoBox` props.

| Name               | Type                                       | Default        | Description                                                                                                                                                            |
| ------------------ | ------------------------------------------ | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`             | `sm`, `md`, `lg`                           | `md`           | The visual size of the `select` element.                                                                                                                               |
| `icon`             | `string`                                   | `chevron-down` | The icon to use in place if the `chevron-down`                                                                                                                         |
| `iconSize`         | `BoxProps['size']`                         | `20px`         | The visual size of the icon                                                                                                                                            |
| `variant`          | `outline`, `unstyled`, `flushed`, `filled` | `outline`      | The variant of the select style to use.                                                                                                                                |
| `focusBorderColor` | `string`                                   |                | The border color when the select is focused.                                                                                                                           |
| `errorBorderColor` | `string`                                   |                | The border color when `isInvalid` is set to `true`.                                                                                                                    |
| `isDisabled`       | `boolean`                                  | `false`        | If `true`, the select will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.                                       |
| `isInvalid`        | `boolean`                                  | `false`        | If `true`, the `select` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.                                 |
| `isRequired`       | `boolean`                                  | `false`        | If `true`, the select element will be required.                                                                                                                        |
| `isReadOnly`       | `boolean`                                  | `false`        | If `true`, prevents the value of the select from being edited.                                                                                                         |
| `rootProps`        | `BoxProps`                                 |                | The props to pass to the wrapper of the select. The select is wrapped in a `Box` to help align the icon, if you want to pass some props to that wrapper, use this prop |

## Slots

| Name    | Description                                              |
| ------- | -------------------------------------------------------- |
| default | contains the `<option>` element as children of `CSelect` |
